// 渲染器
let renderer
function initThree () {
  width = document.getElementById('canvas-frame').clientWidth
  height = document.getElementById('canvas-frame').clientHeight
  renderer = new THREE.WebGLRenderer({ antialias: true })
  renderer.setSize(width, height)
  document.getElementById('canvas-frame').appendChild(renderer.domElement)
  renderer.setClearColor('black', 1.0)
}

// 相机
let camera
function initCamera () {
  camera = new THREE.PerspectiveCamera(45, width / height, 1, 10000)
  // 设置相机位置
  camera.position.set(0, 0, 1000)
  // 分别设置
  // camera.position.x = 0
  // camera.position.y = 1000
  // camera.position.z = 0
}

// 场景
let scene
function initScene () {
  scene = new THREE.Scene()
}

// 灯光
let light
function initLight () {
  light = new THREE.DirectionalLight('blue', 1.0, 0)
  light.position.set(100, 100, 200)
  scene.add(light)
}

// 实体
let cube
function initObject () {
  const geometry = new THREE.Geometry()
  const material = new THREE.LineBasicMaterial({ vertexColors: true })
  const color1 = new THREE.Color('red')
  const color2 = new THREE.Color('green')
  const color3 = new THREE.Color('blue')

  // 线的材质可以由 2 点的颜色决定
  const p1 = new THREE.Vector3(0, 0, 0)
  const p2 = new THREE.Vector3(100, 100, 0)
  const p3 = new THREE.Vector3(200, 0, 0)
  geometry.vertices.push(p1)
  geometry.vertices.push(p2)
  geometry.vertices.push(p3)
  geometry.vertices.push(p1)
  geometry.colors.push(color1, color2, color3, color1)

  // THREE.LineSegments 在若干对的顶点之间绘制的一系列的线
  const line = new THREE.Line(geometry, material, THREE.LineSegments)
  scene.add(line)
}

// 渲染
function render () {
  // 渲染器清空
  renderer.clear()
  renderer.render(scene, camera)
  requestAnimationFrame(render)
}

function threeStart () {
  initThree()
  initCamera()
  initScene()
  initLight()
  initObject()
  render()
}